import * as React from 'react';
import * as PropTypes from 'prop-types';
import cx from 'classnames';
import SvgInfo from './assets';
export interface BaseProps {
  /**
   * @样式类名
   */
  className?: string;
  /**
   * @显示类型
   * @default info
   */
  type?: 'success' | 'info' | 'warning' | 'error';
}

export interface AlertProps
  extends BaseProps,
    React.HTMLAttributes<HTMLDivElement> {}

const iconTypes = {
  info: SvgInfo.svgInfo,
  success: SvgInfo.svgSuccess,
  warning: SvgInfo.svgWarning,
  error: SvgInfo.svgError,
};

export interface AlertState {}
class Alert extends React.PureComponent<AlertProps, AlertState> {
  static propTypes = {
    type: PropTypes.string,
    closable: PropTypes.bool,
    onClose: PropTypes.func,
  };
  static defaultProps = {
    type: 'info',
  };
  constructor(props: AlertProps) {
    super(props);
    this.state = {
      closed: false,
    };
  }

  getPrefixCls(suffix?: string) {
    return `hd-alert${suffix ? '-' + suffix : ''}`;
  }

  close() {
    this.setState({ closed: true });
  }

  renderAlert() {
    const { children, className, type = 'info', ...extraProps } = this.props;
    const alertCls = cx(
      this.getPrefixCls(),
      this.getPrefixCls(type),
      className,
    );
    const svgHtml = iconTypes[type] || iconTypes['info'];
    return (
      <div className={alertCls} {...extraProps}>
        <span
          className={this.getPrefixCls('icon')}
          dangerouslySetInnerHTML={{ __html: svgHtml }}
        />
        <span className={this.getPrefixCls('content')}>{children}</span>
      </div>
    );
  }

  render() {
    return closed ? null : this.renderAlert();
  }
}

export default Alert;
